<script>
export default {
  name: "tao-table",
  props: {
    persons: {
      type: Array,
      required: true
    }
  }
}
</script>

<template>
  <table class="layui-table">
    <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年纪</th>
      <th>操作</th>
    </tr>
    </thead>
    <tr v-for="(person,index) in persons" :key="person.id">
      <td>{{ index + 1 }}</td>
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
      <td>
        <slot :item="person"></slot>
      </td>
    </tr>
    <tbody>
    </tbody>
  </table>
</template>

<style scoped lang="less">
.layui-table {
  thead {
    background-color: #01aaed;
    color: #ffffff;
  }

  tr, th, td {
    text-align: center;
  }
}
</style>